<template>
  <van-dialog class="agreement_btn" v-model:show="isShow" :show-confirm-button="false">
    <div class="flex_colum" style="justify-content:space-between;padding: 40px;">
      <div class="alert_agreement">订单已超时，请重新下单支付</div>
      <van-button class="global_btn" type="danger" @click="handleOutTimeTarget">确定</van-button>
    </div>
  </van-dialog>
</template>

<script setup>
import { ref, defineProps, watch } from 'vue';
const props = defineProps(["isTimeOut"])
const isShow = ref(false)
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
watch(() => props.isTimeOut, (newVal) => {
  if (newVal) {
    isShow.value = true;
  } else {
    isShow.value = false;
  }
});
// 订单超时跳转 超时页面
const handleOutTimeTarget = () => {
  isShow.value = false
  router.push({
    path: '/orderTimeout',
    query: {
      payType: 'timeout'
    }
  })
}
</script>

<style lang="sass" scoped>
@import '@/styles/variables.scss'
.alert_agreement
  text-align: center
  margin-bottom: 28px
:deep(.agreement_btn .van-button)
  color: #fff
  background: $global_color
</style>
